<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<script src="js/jquery-2.0.0.min.js" type="text/javascript" charset="utf-8"></script>
		<title>易云概述</title>

	</head>
	<style type="text/css">
		.tabs-container {
			margin: 0 auto;
			font-family: "微软雅黑", "Arial";
		}
		
		.tabs-header {
			margin: 0;
			padding: 0;
			border-bottom: 1px solid #ddd;
		}
		
		.tabs-header-item {
			box-sizing: border-box;
			text-align: center;
			width: 25%;
			position: relative;
			background-color: #fff;
			display: inline-block;
			margin: 0 -2px;
			list-style: none;
		}
		
		.tabs-header-item.active {
			color: #d82c20;
			background-color: white;
			border-top: 2px solid #d82c20;
			border-left: 1px solid #ddd;
			border-right: 1px solid #ddd;
			border-bottom: 1px solid #fff;
			margin-bottom: -1px;
		}
		
		.tabs-header-item.active>.tabs-header-anchor {
			color: #D82C20;
		}
		
		.tabs-header-anchor {
			box-sizing: border-box;
			display: inline-block;
			padding: 9px 16px 8px 16px;
			text-decoration: none;
			font-size: 16px;
			color: #525252;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			text-align: center;
		}
		
		.tabs-content {
			width: 100%;
		}
		
		.tabs-content-item {
			padding: 0px 0px !important;
			display: none;
		}
		
		.tabs-content-item.active {
			display: block;
		}
		
		.tabs-content-item.active img {
			width: 100%;
		}
	</style>

	<body>
		<div class="tabs-container">
			<ul class="tabs-header">
				<li class="tabs-header-item active">
					<a class="tabs-header-anchor" data-index="0"="" href="#">夜晚</a>
				</li>
				<li class="tabs-header-item">
					<a class="tabs-header-anchor" data-index="1" href="#">森林</a>
				</li>
				<li class="tabs-header-item">
					<a class="tabs-header-anchor" data-index="2" href="#">码头</a>
				</li>
				<li class="tabs-header-item">
					<a class="tabs-header-anchor" data-index="3" href="#">手办</a>
				</li>
			</ul>
			<div class="tabs-content">
				<div class="tabs-content-item active">
					<img src="img/page1.jpg" />
				</div>

				<div class="tabs-content-item">
					<img src="img/page2.jpg" />
				</div>

				<div class="tabs-content-item">
					<img src="img/page3.jpg" />
				</div>
				<div class="tabs-content-item">
					<img src="img/page4.jpg" />
				</div>
			</div>
		</div>
		<script>
			$(document).ready(function() {
				var container = $('.tabs-container');
				var tabs = container.find(".tabs-header-item"),
					contents = container.find('.tabs-content-item');
				tabs.each(function(index, value) {
					var self = this;
					$(this).on("click", function(event) {
						event.preventDefault();
						$(this).addClass("active").siblings().removeClass("active");
						contents.each(function(i, v) {
							$(this).removeClass("active");
							if(i === index) {
								$(this).addClass("active");
							}
						})
					})
				});
			});
		</script>
	</body>

</html>